<script setup lang="ts">
import { onMounted } from 'vue';

import { Button, Card, message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { usePermission } from '#/hooks/usePermission';
import { $t } from '#/locales';
import {
  InventoryApi,
  InventoryCheckModel,
} from '#/models/inventory/inventory';

import { useColumns } from './components/useColumns';

const { hasPermission } = usePermission();

// 权限检查
const permissions = {
  CREATE: hasPermission('inventory:check:create'),
  BATCH_DELETE: hasPermission('inventory:check:batch-delete'),
  BATCH_CLOSE: hasPermission('inventory:check:batch-close'),
};

// 创建模型实例
const checkModel = new InventoryCheckModel();

// 行操作处理
const onActionClick = (data: any) => {
  console.log('Action clicked:', data);
};

// 初始化表格
const { gridOptions, gridApi, loading, selectedRowKeys } =
  useVbenVxeGrid<InventoryApi.InventoryCheck>({
    gridOptions: {
      columns: useColumns(onActionClick),
      height: 'auto',
      selectionConfig: {
        enabled: true,
        type: 'checkbox',
      },
      proxyConfig: {
        ajax: {
          query: async () => {
            return {
              list: [],
              total: 0,
            };
          },
        },
      },
    },
  });

// 创建
const handleCreate = () => {
  console.log('Create clicked');
};

// 批量删除
const handleBatchDelete = async () => {
  try {
    console.log('Batch delete clicked', selectedRowKeys.value);
    message.success($t('inventory.check.batchDeleteSuccess'));
  } catch (error) {
    message.error($t('inventory.check.batchDeleteFailure'));
  }
};

// 批量关闭
const handleBatchClose = async () => {
  try {
    console.log('Batch close clicked', selectedRowKeys.value);
    message.success($t('inventory.check.batchCloseSuccess'));
  } catch (error) {
    message.error($t('inventory.check.batchCloseFailure'));
  }
};

// 组件挂载
onMounted(() => {
  console.log('Component mounted');
});
</script>

<template>
  <div class="inventory-check-list">
    <Card :title="$t('inventory.check.list')" class="mb-4">
      <template #extra>
        <Button type="primary" v-if="permissions.CREATE" @click="handleCreate">
          {{ $t('inventory.check.create') }}
        </Button>
        <Button
          v-if="permissions.BATCH_DELETE"
          type="default"
          danger
          :disabled="!selectedRowKeys || selectedRowKeys.length === 0"
          @click="handleBatchDelete"
          style="margin-left: 8px"
        >
          {{ $t('inventory.check.batchDelete') }}
        </Button>
        <Button
          v-if="permissions.BATCH_CLOSE"
          type="default"
          :disabled="!selectedRowKeys || selectedRowKeys.length === 0"
          @click="handleBatchClose"
          style="margin-left: 8px"
        >
          {{ $t('inventory.check.batchClose') }}
        </Button>
      </template>
      <div class="mt-4">
        <VxeGrid v-bind="gridOptions" :loading="loading" />
      </div>
    </Card>
  </div>
</template>

<style scoped>
.inventory-check-list {
  padding: 20px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mt-4 {
  margin-top: 16px;
}
</style>
